<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../css/bootstrap.min.css">
	<script src="../js/jquery-1.11.1.min.js"></script> 
     <script src="../js/bootstrap.min.js"></script>
	 	<link rel="stylesheet" href="../css/wpl_style.css">

<?php include 'dbInclude.php';?>
</head>
<body  class="gridBody">
<div id="btndiv">
<label style="width:90%;text-align:center">Market Watch</label>
<img id="refresh" src="../img/refresh_new.png"></img>
</div>
<div id="fillref" class="CSSTableGenerator">
<table>
<tr><td>Company</td><td>LTP</td><td>Opening Price</td><td>Closing Price</td></tr>
<?php

$rows=$dbh->query("select * from market M,instrument_master I where M.INSTR_ID = I.INSTR_ID ORDER BY I.INSTR_NAME ;");
foreach ($rows as $row) {
echo "<tr>";
echo "<td>".$row['INSTR_NAME']."</td>";
echo "<td class='price'>".$row['LTP']."</td>";
echo "<td>".$row['OPENING_PRICE']."</td>";
echo "<td>".$row['CLOSING_PRICE']."</td>";
echo "</tr>";
}
?>
</table>
</div>
</body>
<script>
var priceArray = [];
var newPriceArray = [];
var upDownArray = [];
function changeColor(){
	
	var y = document.getElementsByClassName("price");
	for(var i=0;i<y.length;i++){
		
		newPriceArray.push(y[i].innerHTML);
	}
	for(var i=0;i<y.length;i++){
		var diff = newPriceArray[i]-priceArray[i];
		if(diff<0){
			y[i].style.color="red";
		}else if(diff>0){
			y[i].style.color="green";
		}else{
			y[i].style.color="black";
		}
		//upDownArray.push(priceArray[i]-newPriceArray[i]);
		
	}
	//alert(upDownArray);

}
$(document).ready(function(){

	$("#refresh").click(function(){
	priceArray = [];
	newPriceArray = [];
	upDownArray = [];
	var x = document.getElementsByClassName("price");

	for(var i=0;i<x.length;i++){
		priceArray.push(x[i].innerHTML);
	}
	 
	$.ajax({
	  type: "POST",
	  url: "ajax_market.php",
	  
	}).done(function( data ) {
		$("#fillref").html(data);
		changeColor();
		});

	});
});
</script>
</html>